<template>

    <div class="books">
        <van-nav-bar title="公告管理" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-search show-action shape="round" placeholder="请输入搜索关键词">
            <template #action>
                <span>搜索</span>
                <span @click="AddAnnouncement"><van-icon size="15" name="plus" /></span>
            </template>
        </van-search>

        <van-form>
            <van-cell-group inset v-for="item in afficheMain ">
                <!-- 输入任意文本 -->
                <van-field label="公告标题" v-model="item.affichename"></van-field>
                <van-field v-model="item.title" rows="2" autosize label="公告内容" type="textarea" maxlength="50"
                    placeholder="请输入留言" show-word-limit />
                    <van-field>
                    <template #button>
                        <van-button  type="primary"  @click="editAffiche(item)">编辑</van-button>
                        <van-button  type="danger" style="margin-left:10px" @click="delAffiche(item.id)">删除</van-button>
                    </template>
                </van-field>
            </van-cell-group>
        </van-form>

        <!-- 弹出层 -->
        <van-popup v-model:show="show" :style="{ padding: '' }">
            <van-cell-group inset v-model="ggmain">
                <van-field v-model="ggmain.affichename" label="公告标题" placeholder="请输入公告内容" />
                <van-field v-model="ggmain.title" rows="2" autosize label="公告内容" type="textarea" maxlength="100"
                    placeholder="请输入留言" show-word-limit />
                <van-field>
                    <template #button>
                        <van-button size="small" type="primary" @click="addmain">添加公告</van-button>
                    </template>
                </van-field>
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { getAfficheAPI, addAfficheAPI,editAfficheAPI,delAfficheAPI } from '@/api/goodsApi'
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue'
let show = ref()
let ggmain = reactive({
    affichename: '',
    title: ''
})
let afficheMain = reactive([])
let $router = useRouter()
function onClickLeft() {
    $router.back()
}
function AddAnnouncement() {
    show.value = true
}
// 加载公告接口
const loadAffiche = () => {
    getAfficheAPI().then(res => {
        // console.log(res);
        afficheMain.push(...res.data)
    })
}
loadAffiche()
// 点击添加按钮
function addmain() {
    addAfficheAPI(
        ggmain,
       
    ).then(res => {
        console.log(res);
        
        if (res.code == 200) {
            getAfficheAPI().then(res => {
                if (res.code == 200) {
                    afficheMain.splice(0, afficheMain.length, ...res.data);
                    ggmain.affichename = ''
                    ggmain.title = ''
                    show.value = false
                }
            })
        }
    })
}
// 编辑公告
function editAffiche(scope:any){
    show.value = true
    ggmain.affichename = scope.affichename
    ggmain.title = scope.title
    editAfficheAPI(
        ggmain
      ).then(res=>{
        console.log(res);
        
    })
    
    
}
function delAffiche(id:any){
    console.log(id);
    delAfficheAPI({id:id}).then(res=>{
console.log(res);

    })
    
}
</script>

<style scoped>
.books {
    width: 100%;
    height: 100%;
}

.van-nav-bar {
    background-color: #4fc08d
}

</style>